<template>
	<div v-if="visible" class="details-state-tag">
		<span class="details-state-tag__label" :style="styles">{{label}}</span>
	</div>
</template>
<script>
export default {
	name: 'fx-details-state-tag',
	props: {
		label: String,
		icon: String
	},
	computed: {
		styles () {
			return {
				color: this.icon,
				borderColor: this.icon
			}
		},
		visible () {
			return !!this.label
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.details-state-tag {
	display: inline-block;
	&__label {
		border-style: solid
		border-width: 1px
		font-size: 12px;
		box-sizing: border-box;
		padding: 4px;
		border-radius: 4px;
	}
}
</style>

